<template>
  <div class="home-page">
    <!-- 新增：头部区域（包含标题和设置按钮） -->
    <div class="header">
      <h1>阅读工具</h1>
      <n-button type="default" class="header-button" size="small" @click="goToSettings">
        设置
      </n-button>
    </div>
    
    <p>点击下方按钮使用工具</p>
    
    <div class="tool-buttons">
      <!-- 使用路由跳转 -->
      <n-button type="primary" class="home-button" @click="$router.push('/countdown')">
        倒计时工具
      </n-button>
      <!-- 待办事项 -->
      <n-button type="primary" class="home-button" @click="$router.push('/todo')">
        待办事项
      </n-button>
    </div>
  </div>
</template>

<script setup>
import { NButton } from 'naive-ui';

// 新增：设置页面跳转方法
const goToSettings = () => {
  console.log("进入设置页面");
  // 后续可添加路由跳转：$router.push('/settings')
};
</script>

<style scoped>
/* 新增：头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

/* 原有样式保持不变 */
.tool-buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.home-button {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  color: white;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.home-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.home-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


</style>
